/*
 * Copyright (c) 2025 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import 'package:flutter/cupertino.dart';
import 'package:hadss_adaptive_layout/hadss_adaptive_layout.dart';

import '../../../l10n/generated/app_localizations.dart';

class GridWidget extends StatefulWidget {
  final WidthBreakpoint screenType;
  final num currentWidth;

  const GridWidget(
      {Key? key, required this.screenType, required this.currentWidth})
      : super(key: key);

  @override
  State<GridWidget> createState() => _GridWidgetState();
}

class _GridWidgetState extends State<GridWidget> {
  @override
  Widget build(BuildContext context) {
    AppLocalizations il8n = AppLocalizations.of(context)!;
    double itemWidth = widget.screenType == WidthBreakpoint.sm ||
            widget.screenType == WidthBreakpoint.xs
        ? widget.currentWidth / 2
        : widget.currentWidth / 3;
    double itemHeight = widget.screenType == WidthBreakpoint.sm ||
            widget.screenType == WidthBreakpoint.xs
        ? 88
        : widget.screenType == WidthBreakpoint.md
            ? 110
            : 150;

    bool isLg = widget.screenType == WidthBreakpoint.lg ||
        widget.screenType == WidthBreakpoint.xl;

    List gridList = [
      {
        'bigScale': 3.5,
        'smallScale': 3.0,
        'offsetX': 10.0,
        'offsetY': -15.0,
        'imgUrl': 'lib/assets/images/grid/grid_1.png',
        'tagName': il8n.positiveFilm,
        'ratings': '8.0'
      },
      {
        'bigScale': 2.5,
        'smallScale': 2.0,
        'offsetX': 0.0,
        'offsetY': 20.0,
        'imgUrl': 'lib/assets/images/grid/grid_2.png',
        'tagName': il8n.positiveFilm,
        'ratings': '8.0'
      },
      {
        'bigScale': 2.5,
        'smallScale': 2.5,
        'offsetX': 0.0,
        'offsetY': -5.0,
        'imgUrl': 'lib/assets/images/grid/grid_3.png',
        'tagName': il8n.positiveFilm,
        'ratings': '8.0'
      },
      {
        'bigScale': 2.0,
        'smallScale': 2.0,
        'offsetX': 0.0,
        'offsetY': -15.0,
        'imgUrl': 'lib/assets/images/grid/grid_4.png',
        'tagName': il8n.positiveFilm,
        'ratings': '8.0'
      },
      {
        'bigScale': 4.0,
        'smallScale': 3.8,
        'offsetX': 0.0,
        'offsetY': -5.0,
        'imgUrl': 'lib/assets/images/grid/grid_5.png',
        'tagName': il8n.positiveFilm,
        'ratings': '8.0'
      },
      {
        'bigScale': 2.5,
        'smallScale': 2.0,
        'offsetX': 0.0,
        'offsetY': -5.0,
        'imgUrl': 'lib/assets/images/grid/grid_6.png',
        'tagName': null,
        'ratings': '8.0'
      },
      {
        'bigScale': 2.5,
        'smallScale': 2.0,
        'offsetX': 0.0,
        'offsetY': -5.0,
        'imgUrl': 'lib/assets/images/grid/grid_6.png',
        'tagName': null,
        'ratings': '8.0'
      },
      {
        'bigScale': 2.5,
        'smallScale': 2.0,
        'offsetX': 0.0,
        'offsetY': -5.0,
        'imgUrl': 'lib/assets/images/grid/grid_6.png',
        'tagName': null,
        'ratings': '8.0'
      },
      {
        'bigScale': 2.5,
        'smallScale': 2.0,
        'offsetX': 0.0,
        'offsetY': -5.0,
        'imgUrl': 'lib/assets/images/grid/grid_6.png',
        'tagName': null,
        'ratings': '8.0'
      },
      {
        'bigScale': 2.5,
        'smallScale': 2.0,
        'offsetX': 0.0,
        'offsetY': -5.0,
        'imgUrl': 'lib/assets/images/grid/grid_6.png',
        'tagName': null,
        'ratings': '8.0'
      },
      {
        'bigScale': 2.5,
        'smallScale': 2.0,
        'offsetX': 0.0,
        'offsetY': -5.0,
        'imgUrl': 'lib/assets/images/grid/grid_6.png',
        'tagName': null,
        'ratings': '8.0'
      },
      {
        'bigScale': 2.5,
        'smallScale': 2.0,
        'offsetX': 0.0,
        'offsetY': -5.0,
        'imgUrl': 'lib/assets/images/grid/grid_6.png',
        'tagName': null,
        'ratings': '8.0'
      },
    ];

    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        const SizedBox(height: 20),
        Container(
          margin: const EdgeInsets.only(left: 16, right: 16),
          child: GridRow(
            gridCols: gridList.map((item) {
              return GridCol(
                span: SpanOption(xs: 6, sm: 6, md: 4, lg: 3, xl: 3, xxl: 3),
                offset: 0,
                order: 1,
                child: getColItem(isLg,itemHeight,itemWidth,widget,il8n,item),
              );
            }).toList(),
            columns: 12,
            gutter: const Gutter(x: 10, y: 8),
            margin: const EdgeInsets.symmetric(horizontal: 0),
            range: BreakpointRange(list: [320, 600, 840, 1440, 2000]),
          ),
        )
      ],
    );
  }
}

getColItem(isLg,itemHeight,itemWidth,widget,il8n,item){
  return Container(
    margin: const EdgeInsets.only(top: 10),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Stack(
          children: [
            ClipRRect(
              borderRadius: BorderRadius.circular(10),
              child: Transform.scale(
                scale: isLg ? item['bigScale'] : item['smallScale'],
                child: Transform.translate(
                  offset: Offset(item['offsetX'],item['offsetY']),
                  child: Image.asset(
                    item['imgUrl'],
                    height: itemHeight,
                    width: itemWidth,
                  ),
                ),
              ),
            ),
            if(item['tagName'] != null)
              Positioned(
                  child: Container(
                    width: 36,
                    height: widget.screenType == WidthBreakpoint.sm ||
                        widget.screenType == WidthBreakpoint.xs
                        ? 16
                        : 20,
                    decoration: const BoxDecoration(
                        color: Color(0xFFED6F21),
                        borderRadius: BorderRadius.only(
                          topLeft:
                          Radius.circular(10.0), // Top-left corner
                          bottomRight: Radius.circular(
                              10.0), // Bottom-right corner
                        )),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Text(
                          item['tagName'],
                          style: const TextStyle(
                              color: Color(0xFFFFFFFF),
                              fontSize: 13,
                              fontWeight: FontWeight.w600),
                        )
                      ],
                    ),
                  )),
            Positioned(
                bottom: 10,
                right: 10,
                child: Container(
                  width: 36,
                  height: 16,
                  decoration: BoxDecoration(
                      color: const Color.fromARGB(60, 0, 0, 0),
                      borderRadius: BorderRadius.circular(3)),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: const [
                      Text(
                        '8.0',
                        style: TextStyle(
                          color: Color(0xFFFFFFFF),
                          fontSize: 10,
                        ),
                      )
                    ],
                  ),
                ))
          ],
        ),
        Container(
          margin: const EdgeInsets.only(top: 5, bottom: 5),
          child: Text(
            il8n.architectural,
            style: const TextStyle(
                color: Color.fromARGB(255, 0, 0, 0),
                fontSize: 15,
                fontWeight: FontWeight.w400),
          ),
        ),
        Text(
          il8n.historical,
          style: const TextStyle(
            color: Color.fromARGB(100, 0, 0, 0),
            fontSize: 14,
          ),
          maxLines: 1, // 限制为单行
          overflow: TextOverflow.ellipsis, // 超出部分显示...
        )
      ],
    ),
  );
}
